<template>
    <div class="user-manage">
        <div class="query-form">
            <el-form ref="form" :inline="true" :model="queryForm">
                <el-form-item label="审批状态" prop="applyState">
                    <el-select v-model="queryForm.applyState">
                        <el-option value="" label="全部"></el-option>
                        <el-option :value="1" label="待审批"></el-option>
                        <el-option :value="2" label="审批中"></el-option>
                        <el-option :value="3" label="审批拒绝"></el-option>
                        <el-option :value="4" label="审批通过"></el-option>
                        <el-option :value="5" label="作废"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getApplyList">查询</el-button>
                    <el-button @click="handleReset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action"></div>
            <el-table :data="applyList" :header-cell-style="{borderColor: '#ddd', color: '#333', backgroundColor: '#eee'}" border stripe>
                <el-table-column align="center" v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" :formatter="item.formatter">
                </el-table-column>
                <el-table-column label="审批状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.applyState === 1">待审批</el-tag>
                        <el-tag v-else-if="scope.row.applyState === 2">审批中</el-tag>
                        <el-tag v-else-if="scope.row.applyState === 3" type="danger">审批拒绝</el-tag>
                        <el-tag v-else-if="scope.row.applyState === 4" type="success">审批通过</el-tag>
                        <el-tag v-else-if="scope.row.applyState === 5" type="danger">作废</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="休假原因" align="center">
                    <template #default="scope">
                        <el-popover placement="bottom" :width="300" trigger="click" :content="scope.row.reasons">
                            <template #reference>
                                <span class="reason">
                                    <i class="el-icon-view"></i>
                                    查看</span>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button size="mini" @click="handleDetail(scope.row)" v-if="
                scope.row.curAuditUserName == userInfo.userName &&
                [1, 2].includes(scope.row.applyState)
              ">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" :page-sizes="[8,10,15,20]" background layout="total,sizes,prev,pager,next" :total="pager.total" :page-size="pager.pageSize" @current-change="handleCurrentChange" @size-change="handelSizeChange" />
        </div>
        <el-dialog title="审核" width="50%" v-model="showDetailModal" destroy-on-close>
            <el-form ref="dialogForm" :model="auditForm" label-width="120px" label-suffix=":" :rules="rules">
                <el-form-item label="申请人">
                    <div>{{ detail.applyUser.userName }}</div>
                </el-form-item>
                <el-form-item label="休假类型">
                    <div>{{ detail.applyTypeName }}</div>
                </el-form-item>
                <el-form-item label="休假时间">
                    <div>{{ detail.time }}</div>
                </el-form-item>
                <el-form-item label="休假时长">
                    <div>{{ detail.leaveTime }}</div>
                </el-form-item>
                <el-form-item label="休假原因">
                    <div>{{ detail.reasons }}</div>
                </el-form-item>
                <el-form-item label="审批状态">
                    <div>{{ detail.applyStateName }}</div>
                </el-form-item>
                <el-form-item label="审批人">
                    <div>{{ detail.curAuditUserName }}</div>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" :rows="3" placeholder="请输入审核备注" v-model="auditForm.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleApprove('refuse')" type="danger">驳回</el-button>

                    <el-button @click="handleApprove('pass')" type="primary">审核通过</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue";
    import utils from "../utils/utils";
    export default {
        name: "approve",
        setup() {
            //   获取Composition API 上下文对象
            const { ctx } = getCurrentInstance();
            const queryForm = reactive({
                applyState: '',
            });
            const pager = reactive({
                pageNum: 1,
                pageSize: 8,
                total: 0,
            });
            // 定义动态表格-格式
            const columns = reactive([{
                    label: "单号",
                    prop: "orderNo",
                },
                {
                    label: "申请人",
                    prop: "",
                    formatter(row) {
                        return row.applyUser.userName;
                    },
                },
                {
                    label: "休假时间",
                    width: '200px',
                    prop: "",
                    formatter(row) {
                        return (
                            utils.formateDate(new Date(row.startTime), "yyyy-MM-dd") +
                            "到" +
                            utils.formateDate(new Date(row.endTime), "yyyy-MM-dd")
                        );
                    },
                },
                {
                    label: "休假时长",
                    prop: "leaveTime",
                },
                {
                    label: "休假类型",
                    prop: "applyType",
                    formatter(row, column, value) {
                        return {
                            1: "事假",
                            2: "调休",
                            3: "年假",
                        } [value];
                    },
                },
                {
                    label: "申请时间",
                    prop: "createTime",
                    width: 180,
                    formatter: (row, column, value) => {
                        return utils.formateDate(new Date(value));
                    },
                },
                // {
                //     label: "审批人",
                //     prop: "auditUsers",
                // },
                // {
                //     label: "当前审批人",
                //     prop: "curAuditUserName",
                // },
                // {
                //     label: "审批状态",
                //     prop: "applyState",
                //     formatter: (row, column, value) => {
                //         // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
                //         return {
                //             1: "待审批",
                //             2: "审批中",
                //             3: "审批拒绝",
                //             4: "审批通过",
                //             5: "作废",
                //         } [value];
                //     },
                // },
            ]);
            // 申请列表
            const applyList = ref([]);
            // 创建休假弹框表单
            const leaveForm = reactive({
                applyType: 1,
                startTime: "",
                endTime: "",
                leaveTime: "0天",
                reasons: "",
            });

            const showDetailModal = ref(false);
            // 详情弹框对象
            let detail = ref({});
            const userInfo = ctx.$store.state.userInfo;
            // 表单规则
            const rules = {
                remark: [{
                    required: true,
                    message: "请输入审核备注",
                    trigger: "change",
                }, ],
            };
            const auditForm = reactive({
                remark: "",
            });
            // 初始化接口调用
            onMounted(() => {
                getApplyList();
            });

            // 加载申请列表
            const getApplyList = async () => {
                let params = { ...queryForm, ...pager, type: "approve" };
                let { list, page } = await ctx.$api.getApplyList(params);
                applyList.value = list;
                pager.total = page.total;
            };
            // 重置查询表单
            const handleReset = (form) => {
                ctx.$refs[form].resetFields();
                getApplyList();
            };

            // 分页事件处理
            const handleCurrentChange = (current) => {
                pager.pageNum = current;
                getApplyList();
            };
            const handelSizeChange = (current) => {
                pager.pageSize = current
                getApplyList();

            }
            // 弹框关闭
            const handleClose = () => {
                showDetailModal.value = false;
                handleReset("dialogForm");
            };

            const handleDetail = (row) => {
                let data = { ...row };
                data.applyTypeName = {
                    1: "事假",
                    2: "调休",
                    3: "年假",
                } [data.applyType];
                data.time =
                    utils.formateDate(new Date(data.startTime), "yyyy-MM-dd") +
                    "到" +
                    utils.formateDate(new Date(data.endTime), "yyyy-MM-dd");
                // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
                data.applyStateName = {
                    1: "待审批",
                    2: "审批中",
                    3: "审批拒绝",
                    4: "审批通过",
                    5: "作废",
                } [data.applyState];
                detail.value = data;
                showDetailModal.value = true;
            };

            const handleApprove = (action) => {
                ctx.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        let params = {
                            action,
                            remark: auditForm.remark,
                            _id: detail.value._id,
                        };
                        try {
                            await ctx.$api.leaveApprove(params);
                            handleClose();
                            ctx.$message.success("处理成功");
                            getApplyList();
                            ctx.$store.commit(
                                "saveNoticeCount",
                                ctx.$store.state.noticeCount - 1
                            );
                        } catch (error) {}
                    }
                });
            };

            return {
                queryForm,
                pager,
                columns,
                handleCurrentChange,
                handelSizeChange,
                handleReset,
                getApplyList,
                applyList,
                auditForm,
                showDetailModal,
                handleClose,
                rules,
                detail,
                userInfo,
                handleDetail,
                handleApprove,
            };
        },
    };
</script>

<style scoped>
    .reason {
        color: #65aaf1;
        cursor: pointer;
    }

    .pagination {
        display: flex;
    }
</style>